@extends('layout.layer')

@section('layout.content')
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" id="clase-create" autocomplete="off">
        <input type="hidden" name="tid" value="{{$term->id}}" >
        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right"> 培训计划： </label>
          <label class="col-sm-9 control-label align-left">
            <b>{{$term->type->name}}</b>
          </label>

        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right"> 所属分支： </label>
          <label class="col-sm-9 control-label align-left">
            <b>{{$term->branch->name}}</b>
          </label>

        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right"> 计划名称： </label>
          <label class="col-sm-9 control-label align-left">
            <b>{{$term->name}}</b>
          </label>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b" for="category"> <span class="red">*</span> 课程科目： </label>
          <div class="col-sm-6">
            <div class="radio">
              @foreach($term->categories as $category)
              <label class="inline no-padding-left radio-label">
                <input name="category" type="checkbox" value="{{$category->id}}" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> {{$category->name}}</span>
              </label>
              @endforeach
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b" for="clase"> <span class="red">*</span> 班级名称： </label>
          <div class="col-sm-6">
            <input type="text" class="form-control" name="clase" placeholder="新班级名称" value=""/>
          </div>

        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b" for="number"> <span class="red">*</span> 招生人数： </label>
          <div class="col-sm-6">
            <input type="text" class="form-control" name="number" placeholder="招生人数" value=""/>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b"> 报名要求： </label>
          <div class="col-sm-6">
            <div class="radio">
              <label class="inline no-padding-left radio-label">
                <input name="is_limited" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg" checked>
                <span class="lbl"> <b><span class="red">*</span> 额满限招</b></span>
              </label>
              <label class="inline no-padding-left radio-label">
                <input name="is_exam" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> 入学考试</span>
              </label>
              <label class="inline no-padding-left radio-label">
                <input name="is_handin" type="checkbox" value="1" class="ace ace-checkbox-2 input-lg">
                <span class="lbl"> 上交作品</span>
              </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b" for="content"> 考试内容： </label>
          <div class="col-sm-6">
            <textarea rows="4" class="form-control" name="content" placeholder="考试内容及条件"></textarea>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b" for="classtime"> 上课时间： </label>
          <div class="col-sm-6">
            <textarea rows="4" class="form-control" name="classtime" placeholder="上课时间"></textarea>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label no-padding-right b" for="memo"> 备注（提示信息）： </label>
          <div class="col-sm-6">
            <textarea rows="4" class="form-control" name="memo" placeholder="备注信息"></textarea>
          </div>
        </div>

        <div class="space-32"></div>
        <div class="form-group">
          <div class="col-xs-12 center">
            <button type="submit" class="btn btn-primary" style="margin-right:15px;">
              <i class="ace-icon fa fa-check"></i>
              确定
            </button>

            <button type="button" class="btn btn-light">
              <i class="ace-icon fa fa-times"></i>
              取消
            </button>
          </div>
        </div>

      </form>
    </div>
  </div>
@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>


  <script type="text/javascript">
      $(function () {

          $("input:checkbox[name='category']").on('click', function (e) {
              $("input:checkbox[name='category']").not(this).attr("checked", false);
          });

          $('.btn-light').on('click', function(e) {
            //parent.location.reload();
            //var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(parent.layer.index);
          });
          /**
           表单前端验证
           */
          $("#clase-create").validate({
              rules: {
                  category: {required: true},
                  clase: {required: true},
                  number: {
                      required: true,
                      digits: true,
                      minlength: 1,
                      maxlength: 3,

                  },
              },
              messages: {
                  category: {required: "请选择课程科目"},
                  clase: {required: "请填写班级名称"},
                  number: {
                      required: "请填写招生人数",
                      maxlength: "格式不正确",
                      minlength: "格式不正确",
                      digits: "格式不正确"
                  }
              },


              /* 失去焦点时不验证 */
              onfocusout: false,
              onkeyup: false,
              errorElement: 'div',
              errorClass: 'help-block',

              success: function (e) {
                  $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                  $(e).remove();
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.tips(v.message, v.element, {tips: [3,'#dd0000'], time: 2000});
                      return false;
                  });

              },

              submitHandler: function (form) {
                  var is_limited = is_exam = is_handin = 0;

                  if($("input:checkbox[name='is_limited']").is(':checked')) is_limited = 1;
                  if($("input:checkbox[name='is_exam']").is(':checked')) is_exam = 1;
                  if($("input:checkbox[name='is_handin']").is(':checked')) is_handin = 1;

                  $.post('{{route('train.clase.store', $term->id)}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'category': $("input[name='category']:checked").val(),
                      'clase': $("input[name='clase']").val(),
                      'number': $("input[name='number']").val(),
                      'is_limited': is_limited,
                      'is_exam': is_exam,
                      'is_handin': is_handin,
                      'content': $("textarea[name='content']").val(),
                      'classtime': $("textarea[name='classtime']").val(),
                      'memo': $("textarea[name='memo']").val(),
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {time: 2000,shift: -1}, function () {
                          if (data.status === true) {
                              parent.location.reload();
                              parent.layer.close(parent.layer.index);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }


          });

      });
  </script>
@stop